<template>
    <div>
        <el-card shadow="never">
            <el-page-header @back="goBack" content="字典数据列表" style="margin-bottom: 20px;">
            </el-page-header>
            <!-- <Search :search-options="searchOptions" @search="handleSearch" /> -->
            <div style="margin-bottom: 20px;">
                <el-button type="primary" @click="handleAdd">新增字典数据</el-button>
            </div>
            <el-table v-loading="listLoading" element-loading-text="数据正在加载中" :data="list" border fit
                highlight-current-row style="width: 100%">
                <el-table-column v-for="item in columns" :key="item.prop" :label="item.label" :prop="item.prop"
                    :align="item.align" :width="item.width">
                    <template slot-scope="{ row, $index }">
                        <div v-if="item.prop === 'index'">{{ $index + 1 }}</div>
                        <el-tag v-else-if="item.prop === 'isDefault'"
                            :type="row.isDefault === 'Y' ? 'success' : 'info'">
                            {{ row.isDefault === 'Y' ? '是' : '否' }}
                        </el-tag>
                        <div v-else>{{ row[item.prop] }}</div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="160" align="center">
                    <template slot-scope="{ row }">
                        <el-button size="mini" type="primary" @click="handleEdit(row)">编辑</el-button>
                        <el-button size="mini" type="danger" @click="handleDelete(row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <Pagination :page="page" :page_size="page_size" :total="total" @sizeChange="sizeChange"
                @currentChange="pageChange" />
        </el-card>
        <DictDataAddOrEdit ref="dictDataAddOrEditRef" @refresh="getList" />
    </div>

</template>

<script>
import Search from '@/components/Search.vue'
import Pagination from '@/components/Pagination.vue'
import { dictDataList, dictDataDelete } from './api/dictionaryData'
import DictDataAddOrEdit from './AddOrEdit.vue'

const COLUMNS = [
    { label: '序号', prop: 'index', align: 'center', width: 60 },
    { label: '字典编码', prop: 'dictCode', align: 'center', width: 100 },
    { label: '字典排序', prop: 'dictSort', align: 'center', width: 100 },
    { label: '字典标签', prop: 'dictLabel', align: 'left', width: 160 },
    { label: '字典键值', prop: 'dictValue', align: 'left', width: 160 },
    { label: '字典类型', prop: 'dictType', align: 'left', width: 160 },
    { label: '样式属性', prop: 'cssClass', align: 'left' },
    { label: '表格回显样式', prop: 'listClass', align: 'left' },
    { label: '是否默认', prop: 'isDefault', align: 'center', width: 100 },
    { label: '创建时间', prop: 'createDate', align: 'center', width: 180 },
    { label: '更新时间', prop: 'updateDate', align: 'center', width: 180 },
    { label: '备注', prop: 'remark', align: 'left' }
]

const SEARCH_OPTIONS = [
    { label: '字典类型', key: 'dictType', type: 'input', placeholder: '如: sys_user_sex' },
    { label: '字典标签', key: 'dictLabel', type: 'input', placeholder: '支持模糊搜索' },
    {
        label: '是否默认', key: 'isDefault', type: 'select', options: [
            { label: '全部', value: '' },
            { label: '是', value: 'Y' },
            { label: '否', value: 'N' }
        ]
    }
]

export default {
    name: 'DictDataList',
    components: { Search, Pagination, DictDataAddOrEdit },
    data() {
        return {
            dictType: '',
            listLoading: false,
            list: [],
            page: 1,
            page_size: 20,
            total: 0,
            columns: COLUMNS,
            searchOptions: SEARCH_OPTIONS,
            searchParams: {}
        }
    },
    created() {
        this.dictType = this.$route.query.dictType
        this.getList()
    },
    methods: {
        handleAdd() {
            this.$refs.dictDataAddOrEditRef.openAdd(this.dictType)
        },
        goBack() {
            this.$router.push({
                path: '/system/dictType'
            })
        },
        async getList() {
            this.listLoading = true
            try {
                const params = {
                    // current: this.page,
                    // size: this.page_size,
                    dictType: this.dictType,
                    // ...this.searchParams
                }
                const res = await dictDataList(params)
                if (Array.isArray(res)) {
                    this.list = res
                    this.total = res.length
                } else {
                    this.list = res.records || res.data || res.list || []
                    this.total = res.total || res.count || 0
                }
            } finally {
                this.listLoading = false
            }
        },
        handleSearch(params) {
            this.searchParams = params
            this.page = 1
            this.getList()
        },
        sizeChange(size) {
            this.page_size = size
            this.page = 1
            this.getList()
        },
        pageChange(page) {
            this.page = page
            this.getList()
        },
        handleEdit(row) {
            this.$refs.dictDataAddOrEditRef.openEdit(row)
        },
        handleDelete(row) {
            this.$confirm('确定删除该字典数据吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                dictDataDelete(row.dictCode).then(res => {
                    this.$message.success('删除成功')
                    this.getList()
                })
            })
        }
    }
}
</script>

<style lang="scss" scoped></style>
